#app{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box_list{
  display: flex;
}

.code_box{
  width: 70px;
  height: 80px;
  border: 1px solid #999;
  text-align: center;
  margin-right: 10px;
  font-weight: 700;
  font-size: 24px;
}

.code_box.active{
  border: 1px solid skyblue;
  animation: flicker 2s linear infinite;
}

@keyframes flicker{
  0%{
    border: 1px solid skyblue;
  }
  25%{
    border: 1px solid rgba(135, 206, 235,.25);
    box-shadow: 0 0 2px rgba(135, 206, 235,.25);
  }
  50%{
    border: 1px solid rgba(135, 206, 235,.5);
    box-shadow: 0 0 5px rgba(135, 206, 235,.25);
  }
  75%{
    border: 1px solid rgba(135, 206, 235,.75);
    box-shadow: 0 0 7px rgba(135, 206, 235,.25);
  }
  100%{
    border: 1px solid skyblue;
    box-shadow: 0 0 10px rgba(135, 206, 235,.25);
  }
}


/* 去掉右侧上下箭头 */
.code_box::-webkit-outer-spin-button,
.code_box::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.code_box:last-child{
  margin-right: 0;
}